<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>User Dashboard - Magneto, by Protoweb</title>

  {include file="head-common.html"}

  <script src="{views_url}js/lib/flot/jquery.flot.min.js"></script>
  <script src="{views_url}js/lib/flot/jquery.flot.pie.min.js"></script>
  
  <script type="text/javascript">

    function sends_pie_chart(delivered, bounced, undelivered, sending) {
      var data = [
        { label: "Sending",     data: sending    , color: '#EDC240'},
        { label: "Delivered",   data: delivered  , color: '#AFD8F8'},
        { label: "Bounced",     data: bounced    , color: '#CB4B4B'},
    		{ label: "Undelivered", data: undelivered, color: '#9440ED'},
      ];

      jQuery.plot(jQuery(".sends-pie-chart"), data, {
        series: {
          pie: { 
            show: true,
            radius: 1,
            label: {
              show: true,
              radius: 3/4,
              formatter: function(label, series){
                return '<div class="pie-labels">'+Math.round(series.percent)+'%</div>';
              },
              background: { opacity: 0.5 }
            }
          }
        },
        legend: {
          show: true,
          labelFormatter: function(label, series) {
            var percent = Math.round(series.percent);
            var number = series.data[0][1];
            return('<b>'+label+'</b> '+percent+'% ('+ number + ' emails)');
          }
        }
      });
    }

    function read_pie_chart(delivered, read) {
      var data = [
        { label: "Delivered", data: delivered, color: '#AFD8F8'},
        { label: "Read",      data: read     , color: '#4DA74D'},
      ];

      jQuery.plot(jQuery(".read-pie-chart"), data, {
        series: {
          pie: { 
            show: true,
            radius: 1,
            label: {
              show: true,
              radius: 3/4,
              formatter: function(label, series){
                return '<div class="pie-labels">'+Math.round(series.percent)+'%</div>';
              },
              background: { opacity: 0.5 }
            }
          }
        },
        legend: {
          show: true,
          labelFormatter: function(label, series) {
            var percent = Math.round(series.percent);
            var number = series.data[0][1];
            return('<b>'+label+'</b> '+percent+'% ('+ number + ' emails)');
          }
        }
      });
    }

    // updates the pie chart and sending resume
    function update_last_campaign_stats() {
      jQuery.post("{base_url}campaigns/stats/{$last_campaign->id}/",
        function(data) {
          
          // convert to object
          data = JSON.parse(data);

          // update pie chart
          sends_pie_chart(data.delivered + data.read, data.bounced, data.undelivered, (data.count - (data.bounced + data.delivered + data.read + data.undelivered)));

          read_pie_chart(data.delivered, data.read);
          
          // update sending_resume
          jQuery('#sending_resume').html((data.delivered + data.bounced + data.read + data.undelivered) + ' of ' + data.count + ' emails sent');
        } // funtion(data)
      ); // post
    } // update_last_campaign_stats

    jQuery(document).ready(function(){

      // execute update_last_campaign_stats() every 10 seconds
      setInterval("update_last_campaign_stats()", 10000);

      // first call to show data before the first 10 second period
      update_last_campaign_stats();

      // clean recipients
      //jQuery.post("{base_url}clients/clean_recipients/");
    });
  </script>

</head>

<body>

  {include file="header.html"}

  <div class="main container">

    <h1 class="over-bg antialias-white">Dashboard</h1>

    {include file="messages_managment.html"}

    <section>

      <div class="row" style="margin-bottom: 1em;">
        <h2>
          <span class="span8">{$last_campaign->subject}</span>
          <span class="span4 text-right" id="sending_resume"></span>
        </h2>
      </div>

      <div class="row">

        <div class="span5 pie-chart-container">
          <div class="sends-pie-chart pie-chart-dashboard"></div>
        </div>

        <div class="span5 pie-chart-container">
          <div class="read-pie-chart pie-chart-dashboard"></div>
        </div>

        <div class="pull-right" style="margin-top: 50px;">
          <a class="btn btn-success" href="{base_url}campaigns/create/">
            <i class="icon-magnet icon-white"></i> New Campaign
          </a>
        </div>          
                
      </div>
    </section>
    <!-- row last campaign -->

    <div class="row">

      <div class="span8">

        {if $client->current_campaigns()->count()}
        <section class="row">
          <div class="span8">
            <h2>Current campaigns</h2>
            <ul class="alignleft">
            {foreach from=$client->current_campaigns()->get() item="campaign"}
              <li><a href="{base_url}campaigns/edit/{$campaign->id}/">{$campaign->subject}</a></li>
            {/foreach}
            </ul>
          </div>
        </section>
        <!-- section current campaigns -->
        {/if}

        <section class="row">
          <div class="span4">
            <h2>Admin tasks</h2>
            <ul class="pull-left margin-right-halfgutter">
              <li><a href="{base_url}recipients/import/">Import contacts</a></li>
              <li><a href="{base_url}recipients/search/">Manage Contacts</a></li>
              <li><a href="{base_url}recipients/create/">Create Contact</a></li>
              <li><a class="no-follow" href="">Make sign-up forms</a></li>
            </ul>
            <ul class="pull-left">
              <li><a class="no-follow" href="{base_url}catalogs/listing/">Manage Lists</a></li>
              <li><a class="no-follow" href="">Attributes</a></li>
            </ul>
          </div>

          <div class="span4">
            <h2>Campaigns</h2>
            <ul>
              <li><a href="{base_url}campaigns/create/"><strong>New campaign</strong></a></li>
              <li><a href="{base_url}campaigns/history/">View old campaigns</a></li>
            </ul>
          </div>
        </section>
        <!-- section tasks -->

      </div>
      <!-- span 8 tasks -->


      <div class="span4">
        <section>
          <h2>Quota consumed</h2>
          <div class="progress progress-info progress-striped active">
            <div class="bar" style="width: 40%;"></div>
          </div>
        </section>

        <section>
          <h2>Your templates</h2>
          <ul class="thumbnails">
            {foreach from=$templates item="tpl"}
            <li class="span1">
              <a data-tplid="{$tpl->id}" href="#" title="{$tpl->name}" class="thumbnail no-follow">
                <img src="{$templates_path}{$tpl->keyname}/{$tpl->keyname}.png" alt="{$tpl->name}" />
              </a>
            </li>
            {/foreach}
          </ul>
          <a class="no-follow btn" href="#">More Templates</a>
        </section>
      </div>
      <!-- span4 your templates -->

    </div>
    <!-- principal row -->

  </div>
  <!-- main container -->

  {include file="footer.html"}

</body>
</html>
